<template>
  <app-header></app-header>
  
  <div style="float: left; width: 50%; display: flex;">
      <img src="@/assets/lets_start_making.png" alt="赋予你的故事无限可能" class="lets_start_making">
      <!-- 向右的按钮 -->
      <div class="left_button" @click="toLoginPage">
        <div>
          <img src="@/assets/point_to_right.png" alt=""  class="left_arrow">
        </div>
      </div>
  </div>

  <div style="float: right; width: 50%;">
      <img src="@/assets/main-logo.png" alt="图片加载失败" class="main-logo">
  </div>

  <app-footer></app-footer>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue';
import AppFooter from '@/components/AppFooter.vue';

export default {
  components:{AppHeader,AppFooter},
  methods:{
    toLoginPage(){
      window.location.href = '/login'
    },
    
  }
}
</script>

<style>
/* 赋予你的故事无限可能那段文字 */
.lets_start_making{
  width: 70%;
  margin-top: 24%;
  margin-left: 22%;
}
/* 向左的按钮 */
.left_button{
  width: 7%;
  height: 7%;
  background: #FFD515;
  border-radius: 100%;
  margin-top: 35%;
  margin-left: -15%;
}
/* 向左的按钮 */
.left_button:hover{
  width: 7%;
  height: 7%;
  background: #f3c708;
  border-radius: 100%;
  margin-top: 35%;
  margin-left: -15%;
}
/* 向左的按钮 */
.left_button:active{
  width: 7%;
  height: 7%;
  background: #FFD515;
  border-radius: 100%;
  margin-top: 35%;
  margin-left: -15%;
}
/* 按钮里的箭头 */
.left_arrow{
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
}
/* 大图标 */
.main-logo {
        margin-top: 7%;
        margin-left: 10%;
        width: 25%;
        position: absolute;
        z-index: 100;
        -webkit-animation: bounce-down 4s linear infinite;
        animation: bounce-down 4s linear infinite;
 
 }
 
@-webkit-keyframes bounce-down {
       25% {
            -webkit-transform: translateY(-6%);
       }
       50%, 100% {
            -webkit-transform: translateY(0);
       }
       75% {
            -webkit-transform: translateY(6%);
       }
}
 
@keyframes bounce-down {
        25% {
             transform: translateY(-6%);
        }
        50%, 100% {
             transform: translateY(0);
        }
        75% {
             transform: translateY(6%);
        }
}

</style>